<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出层</title>
		<!-- 作为独立组件使用 -->
		<!-- <link rel="stylesheet" type="text/css" href="layer/layer.css"/>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> -->
		
		<!-- layui模块化使用 -->
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<!-- 
			两种使用方式：
				1. 作为独立组件使用
					在layer独立版本官网下载组件包，在需要使用layer的页面加载1.8版本以上的jquery的js文件和layer.js文件
				2. layui模块化使用
					只需要引入layui的css与js文件，在script中使用layui.use()加载模块
		-->
		
		<span>内容1</span>
		<span>内容2</span>
		<span>内容3</span>
		<span id="sp">内容4</span>

		 
		 <script type="text/javascript">
		 	
			// 使用layer
			// layer.msg("Hello");
			
			
			// 加载模块
			layui.use("layer",function(){
				var layer = layui.layer;
				
				// 使用layer
				// layer.msg("Hi");
				
				 /* 信息框 */
				/* layer.open({
				    type:0,
				    // title:"系统消息",
					title:false, // 不显示标题
					title:['标题','color:red;'],
				    // content可以传入任意的文本或html
				    content:"Hello"
				}); */
				
				/* 页面层 */
				/* layer.open({
				    type:1,
				    title:"系统消息",
				    // content可以传入任意的文本或html
				    content:"<div style='height:200px;width:400px'>Hello</div>"
				}); */
				
				/* iframe */
				/* layer.open({
				    type:2,
				    title:"系统消息",
				    // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no']
				    content:"http://www.baidu.com"
				    // content:["http://www.baidu.com",'no']
					// ,area: '500px' // 设置宽度，高度自适应
					,area:['800px', '400px'] // 设置宽高
				}); */
				
				 /* tips层 */
				/* layer.open({
				  type: 4,
				  content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
				}); */
				
				// eg1
				//layer.alert('酷毙了', {icon: 2});
				// eg2
				// layer.msg('不开心。。', {icon: 5});
				// eg3
				// layer.load(2); // 风格1的加载
				
				// eg1
				//layer.alert('很高兴见到你😊', {icon: 6});
				
				// eg2
				/* layer.msg('你愿意和我做朋友么？', {
				    time: 0, //不自动关闭
				    btn: ['当然愿意', '狠心拒绝'], // 按钮
				    yes: function(index){ 
				        layer.close(index); // 关闭当前弹出框
				        layer.msg('新朋友，你好！', {
				            icon: 6, // 图标
				            btn: ['开心','快乐']
				        });
				    }
				}); */
				
				// eg3
				//layer.msg('这是常用的弹出层');
				
				// eg4
				// layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
				
				// eg5
				layer.msg('玩命加载中...=￣ω￣=', function(){
				    // 关闭后的操作
				    layer.msg('(⊙o⊙)？');
				});
				
				
				
			});
			
		 </script>
		 
	</body>
</html>
